<template>
  <view class="page-container">
    <!-- 顶部区域 -->
    <view class="fixed-header">
      <!-- 状态栏占位 -->
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      
      <!-- 头部导航 -->
      <view class="header">
        <view class="back-btn" @click="goBack">
          <uni-icons type="back" size="20" color="#fff"></uni-icons>
        </view>
        <view class="search-box">
          <uni-icons type="search" size="16" color="#e84d1c"></uni-icons>
          <input 
            type="text" 
            v-model="queryParams.keyword" 
            placeholder="请输入商品名称/规格搜索" 
            placeholder-class="placeholder"
            confirm-type="search"
            @confirm="handleSearch"
          >
          <uni-icons 
            v-if="queryParams.keyword" 
            type="clear" 
            size="14" 
            color="#999"
            @click="clearSearch"
          ></uni-icons>
        </view>
      </view>

      <!-- 标签导航 -->
      <view class="tab-nav">
      <view
          v-for="(item, index) in navList" 
          :key="index"
          class="tab-item"
          :class="{ active: tabCurrentIndex === index }"
          @click="tabClick(index)"
      >
        {{ item.text }}
      </view>
    </view>
    </view>

    <!-- 内容区域 -->
    <swiper 
      :current="tabCurrentIndex" 
      class="swiper-box" 
      :style="{ top: contentTop + 'px' }"
      duration="300" 
      @change="changeTab"
      @animationfinish="swiperFinished"
    >
      <swiper-item class="swiper-item" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
        <!-- 加载状态显示 - 仅在初次加载时显示 -->
        <view class="loading-container" v-if="tabCurrentIndex === tabIndex && dataLoading && isInitialLoading">
          <view class="loading-spinner">
            <view class="loading-bounce"></view>
          </view>
          <text class="loading-text">加载中...</text>
        </view>
        
        <scroll-view
          class="scroll-view" 
            scroll-y
          @scrolltolower="loadMore"
          :show-scrollbar="false"
          :enhanced="false"
          :bounces="true"
          :scroll-top="0"
          v-else
        >
          <template v-if="queryParams.orderStatus !== 4">
            <view class="order-list">
            <view
                v-for="(item,index) in tabItem.orderList" 
                :key="item.id"
                class="order-item"
                @click="navigateToDetail(item)"
            >
              <view class="i-top b-b">
                <text class="time">下单时间：{{ item.createTime }}</text>
                  <text :class="['status', {
                    'status-pending': item.orderStatus === 0,
                    'status-shipping': item.orderStatus === 1,
                    'status-receiving': item.orderStatus === 2,
                    'status-reviewing': item.orderStatus === 3,
                    'status-completed': item.orderStatus === 4,
                    'status-closed': item.closed === 1
                  }]">
                    <text v-if="item.closed === 1">已关闭</text>
                    <text v-else>
                      <text v-if="item.orderStatus === 0">待下单</text>
                      <text v-if="item.orderStatus === 1">待发货</text>
                      <text v-if="item.orderStatus === 2">待收货</text>
                      <text v-if="item.orderStatus === 3">待评价</text>
                      <text v-if="item.orderStatus === 4">已完成</text>
                  </text>
                </text>
              </view>

              <view>
                <view
                    :key="detail.id"
                    v-for="detail in item.details"
                    class="goods-box-single"
                >
                  <album width="150rpx" style="width: fit-content" height="150rpx" :showExtraImages="false"
                         :images="detail.images"
                         :maxCount="1" :previewEnabled="false"></album>
                  <view class="right">
                    <view style="display: flex; align-items: center; justify-content: space-between">
                        <text class="title clamp" style="color: #333">{{ detail.productVo?.productName }}</text>
                        <text class="price">{{ detail.unitPrice }}</text>
                    </view>
                    <view style="display: flex; align-items: center; justify-content: space-between">
                      <text class="attr-box clamp">{{ detail.specificationVo?.specName }}</text>
                      <text class="attr-box">x{{ Number(detail.quantity).toFixed(0) }}</text>
                    </view>
                    <view style="display: flex; align-items: center; justify-content: flex-end" v-if="detail.refundVo">
                      <view v-if="detail.refundVo.complete === 0">
                          <text v-if="detail.refundVo.status === 0" class="up-warning">
                          {{getRefundType(detail.refundVo.type)}}申请中
                        </text>
                          <text v-if="detail.refundVo.status === 1" class="up-error">
                          {{getRefundType(detail.refundVo.type)}}申请成功
                        </text>
                          <text v-if="detail.refundVo.status === 2" class="up-primary">
                          {{getRefundType(detail.refundVo.type)}}申请失败
                        </text>
                      </view>
                      <view v-if="detail.refundVo.complete === 1">
                          <text class="up-info">
                          {{getRefundType(detail.refundVo.type)}}售后完成
                        </text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>

              <view class="price-box">
                  共<text class="num">{{ Number(item.totalQuantity) }}</text>件商品
                  <text v-if="item.orderStatus === 0">需付款</text>
                  <text v-if="item.orderStatus !== 0">实付款</text>
                <text class="price">{{ item.totalAmount }}</text>
              </view>

                <view v-if="[0,2].includes(item.orderStatus) && item.closed === 0" class="action-box">
                  <view class="left-btns">
                <button class="action-btn" v-if="item.orderStatus === 0" @click.stop="cancelOrder(item)">
                  取消订单
                </button>
                  </view>
                  <view class="right-btns">
                <button class="action-btn recom" v-if="item.orderStatus === 0 && item.remainSeconds > 0"
                        @click.stop="pay(item)">立即下单{{ formatSeconds(item.remainSeconds) }}
                </button>
                <button v-if="item.orderStatus === 2" class="action-btn recom" @click.stop="receipt(item)">确认收货
                </button>
              </view>
            </view>
          </view>
            </view>
            <!-- 空状态 -->
            <empty 
              v-if="tabItem.loaded && tabItem.orderList.length === 0" 
              class="empty-content"
            ></empty>
            <!-- 加载更多 -->
            <uni-load-more :status="tabItem.loadingType"></uni-load-more>
          </template>
          
          <template v-else>
            <view
                v-for="(item,index) in tabItem.orderList" :key="item.id"
                class="order-item"
                style="padding-bottom: 20upx;"
                @click="navigateToDetail(item)"
            >
              <view class="i-top b-b">
                <text class="time">申请时间：{{ item.createTime }}</text>
                <text :class="['status', {
                  'status-pending': item.type === 0,
                  'status-shipping': item.type === 1,
                  'status-receiving': item.type === 2,
                  'status-reviewing': item.type === 3,
                  'status-completed': item.type === 4,
                  'status-closed': item.type === 5
                }]">
                    <text v-if="item.type === 0">换货</text>
                    <text v-if="item.type === 1">退货退款</text>
                    <text v-if="item.type === 2">仅退款</text>
                  <text v-if="item.type === 3">待评价</text>
                  <text v-if="item.type === 4">已完成</text>
                  <text v-if="item.type === 5">已关闭</text>
                </text>
              </view>

              <view
                  class="goods-box-single"
              >
                <album width="150rpx" :key="item.id" style="width: fit-content" height="150rpx" :showExtraImages="false"
                       :images="item?.sellOrderDetailVo?.images"
                       :maxCount="1" :previewEnabled="false"></album>
                <view class="right">
                  <view style="display: flex; align-items: center; justify-content: space-between">
                    <text class="title clamp" style="color: #303133">{{ item?.sellOrderDetailVo?.productVo?.productName }}</text>
                    <text class="price" style="color: black; font-weight: 500">{{ item?.sellOrderDetailVo?.unitPrice }}</text>
                  </view>
                  <view style="display: flex; align-items: center; justify-content: space-between">
                    <text class="attr-box clamp">{{ item?.sellOrderDetailVo?.specificationVo?.specName }}</text>
                    <text class="attr-box">x{{ Number(item?.sellOrderDetailVo?.quantity).toFixed(0) }}</text>
                  </view>
                  <view style="display: flex; align-items: center; justify-content: flex-end">
                    <view v-if="item.complete === 0">
                      <text v-if="item.status === 0" class="up-warning" style="font-size: 22upx">
                        申请中
                      </text>
                      <text v-if="item.status === 1" class="up-error" style="font-size: 22upx">
                        申请成功
                      </text>
                      <text v-if="item.status === 2" class="up-primary" style="font-size: 22upx">
                        申请失败
                      </text>
                    </view>
                    <view v-if="item.complete === 1" class="up-info" style="font-size: 22upx">售后完成</view>
                  </view>
                </view>
              </view>

<!--              <view v-if="item.status !== 1" class="action-box b-t">-->
<!--                <button class="action-btn" v-if="item.status === 0" @click.stop="handleCancelRefund(item)">-->
<!--                  取消申请-->
<!--                </button>-->
<!--              </view>-->
            </view>
          </template>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import empty from "@/components/empty";
import {cancelOrder, handleReceipt} from "@/api/sell/sellOrderDetail";
import {listSellOrder} from "@/api/sell/sellOrder";
import Navbar from "@/components/navbar/index.vue";
import {cancelRefund, delRefund, getRefund, listRefund} from "@/api/sell/refund";
import {formatSeconds} from "../../../utils/ruoyi";
import uniLoadMoreX from "@/components/uni-load-more/uni-load-more.vue";

export default {
  components: {
    Navbar,
    uniLoadMoreX,
    empty
  },
  data() {
    return {
      showMultiPay: false,
      showMultiPayCancel: false,
      tabCurrentIndex: 0,
      navList: [
        {
          status: -1,
          text: '全部',
          loadingType: 'more',
          orderList: [],
          loaded: false
        },
        {
          status: 0,
          text: '待下单',
          loadingType: 'more',
          orderList: [],
          loaded: false
        },
        {
          status: 1,
          text: '待发货',
          loadingType: 'more',
          orderList: [],
          loaded: false
        },
        {
          status: 2,
          text: '待收货',
          loadingType: 'more',
          orderList: [],
          loaded: false
        },
        // {
        //   status: 3,
        //   text: '待评价',
        //   loadingType: 'more',
        //   orderList: []
        // },
        {
          status: 4,
          text: '退款/售后',
          loadingType: 'more',
          orderList: [],
          loaded: false
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 4,
        orderNo: '',
        keyword: '',
        orderStatus: undefined,
      },
      orderDetailList: [],
      selectedItem: {},
      statusBarHeight: 0,
      contentTop: 0,
      isFirstLoad: true, // 标记是否是首次加载
      dataLoading: false, // 标记是否正在加载数据
      scrollRefs: [], // 存储滚动视图的引用
      isInitialLoading: true // 新增初始加载状态
    };
  },
  created() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    // 计算内容区域顶部位置：状态栏 + 头部(44px) + 标签栏(44px)
    this.contentTop = this.statusBarHeight + 88;
  },
  onShow() {
    // 使用 nextTick 确保DOM已渲染完成
    this.$nextTick(() => {
      console.log('页面显示，当前选中标签:', this.navList[this.tabCurrentIndex].text);
      
      try {
        // 页面显示时总是刷新数据，以确保数据的实时性
        // 对于已经加载过的标签页，通过将loaded标记设为false来强制刷新
        const currentTab = this.navList[this.tabCurrentIndex];
        
        // 从其他页面返回时也强制刷新数据
        currentTab.loaded = false;
        this.refreshCurrentTab();
      } catch (err) {
        console.error('onShow错误:', err);
        // 确保加载状态被重置，避免无限loading
        this.dataLoading = false;
      }
    });
  },
  onLoad(options) {
    // 设置当前选中的标签
    if (options.status !== undefined) {
      const index = this.navList.findIndex(item => item.status === Number(options.status));
      this.tabCurrentIndex = index >= 0 ? index : 0;
    }
    
    // 页面首次加载时，加载当前标签数据
    this.$nextTick(() => {
      try {
        this.refreshCurrentTab();
      } catch (err) {
        console.error('onLoad错误:', err);
        this.dataLoading = false;
      }
    });
  },
  onPullDownRefresh() {
    // 下拉刷新时强制重新加载数据
    try {
      this.refreshCurrentTab();
    } catch (err) {
      console.error('下拉刷新错误:', err);
      this.dataLoading = false;
    }
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },

  methods: {
    // 安全地设置scrollTop，避免DOM引用错误
    safeSetScrollTop(scrollView, value) {
      try {
        if (scrollView && typeof scrollView.scrollTop === 'function') {
          scrollView.scrollTop(value);
        }
      } catch (err) {
        console.error('设置scrollTop失败:', err);
      }
    },
    
    // 刷新当前tab的数据
    refreshCurrentTab() {
      // 如果正在加载数据，不要重复刷新
      if (this.dataLoading) {
        console.log('刷新被阻止：正在加载数据中，请稍后再试');
        return;
      }
      
      try {
        let navItem = this.navList[this.tabCurrentIndex];
        let tabStatus = navItem.status;
        console.log(`准备刷新标签 "${navItem.text}" (状态值:${tabStatus}) 的数据`);
        
        // 清除可能存在的定时器
        if (navItem.orderList && navItem.orderList.length) {
          navItem.orderList.forEach(order => {
            if (order.timer) {
              clearInterval(order.timer);
              order.timer = null;
            }
          });
        }
        
        // 设置加载状态
        this.dataLoading = true;
        // 当刷新标签数据时，判断是否是初始加载
        this.isInitialLoading = !navItem.loaded;
        
        // 清空当前选项卡数据并重置分页
        navItem.orderList = [];
        navItem.loadingType = 'more';
        navItem.loaded = false;
        this.queryParams.pageNum = 1;
        
        // 更新orderStatus参数
        this.queryParams.orderStatus = tabStatus === -1 ? '' : tabStatus;
        
        // 记录API请求信息
        console.log(`即将请求API，参数: orderStatus=${this.queryParams.orderStatus}`);
        
        // 重新加载数据
        this.loadData('refresh');
      } catch (err) {
        console.error('刷新标签数据错误:', err);
        this.dataLoading = false;
        this.isInitialLoading = false;
      }
    },
    
    getRefundType(type) {
      switch (type) {
        case 0:
          return '换货';
        case 1:
          return '退货退款';
        case 2:
          return '仅退款';
      }
    },
    formatSeconds,
    navigateToDetail(item) {
      if (this.queryParams.orderStatus !== 4) {
        uni.navigateTo({
          url: `/pages/sellment/order/detail?orderDetailId=${item.id}`
        })
      } else {
        uni.navigateTo({
          url: `/pages/sellment/order/refundDetail?refundId=${item.id}`
        })
      }
    },
    //获取订单列表
    loadData(source) {
      // 如果已经在加载中，防止重复请求
      if (this.dataLoading && source !== 'refresh') {
        console.log('正在加载数据中，请稍后再试');
        return;
      }
      
      try {
      let index = this.tabCurrentIndex;
      let navItem = this.navList[index];
      let status = navItem.status;

        // 记录请求开始时间，用于调试
        const startTime = new Date().getTime();
        console.log(`开始加载${status === 4 ? '退款' : '订单'}数据，来源:${source}, 状态:${status}, 当前索引:${index}`);
        
        // 标记为加载中状态
        this.dataLoading = true;
        
        // 设置isInitialLoading状态
        // 只有在刷新或初始加载时才显示全屏加载动画
        if (source === 'refresh' || source === 'tabChange' || source === 'init') {
          this.isInitialLoading = !navItem.loaded;
        } else {
          // 滚动加载更多数据时不显示全屏加载
          this.isInitialLoading = false;
      }
        
      navItem.loadingType = 'loading';

        // 确保orderStatus参数设置正确
      this.queryParams.orderStatus = status === -1 ? '' : status;
        
        console.log(`API请求参数: orderStatus=${this.queryParams.orderStatus}, pageNum=${this.queryParams.pageNum}, source=${source}`);
        
        // 创建API请求并添加超时处理
        const apiPromise = this.queryParams.orderStatus !== 4 
          ? listSellOrder(this.queryParams)
          : listRefund(this.queryParams);
        
        // 添加超时保护，防止API请求无限挂起
        const timeoutPromise = new Promise((_, reject) => {
          setTimeout(() => reject(new Error('API请求超时')), 10000);
        });
        
        // 使用Promise.race确保请求不会挂起太久
        Promise.race([apiPromise, timeoutPromise])
          .then(res => {
            // 添加新数据
            const newItems = res.rows || [];
            console.log(`获取到${newItems.length}条数据，总数:${res.total}`);
            
            // 确保不重复添加数据
            if (source === 'tabChange' || source === 'search' || source === 'refresh' || source === 'init') {
              navItem.orderList = [...newItems];
            } else {
              navItem.orderList.push(...newItems);
            }
            
            // 设置倒计时定时器（如果是订单数据）
      if (this.queryParams.orderStatus !== 4) {
              navItem.orderList.forEach(order => {
                if (order.remainSeconds && order.remainSeconds > 0 && !order.timer) {
              order.timer = setInterval(() => {
                order.remainSeconds -= 1;
                if (order.remainSeconds <= 0) {
                  clearInterval(order.timer);
                  order.timer = null;
                      this.refreshCurrentTab();
                }
                  }, 1000);
            }
              });
            }
            
            // 标记已加载完成
            navItem.loaded = true;
            
            // 判断是否需要加载更多
            if (Number(res.total) > Number(navItem.orderList.length)) {
            this.queryParams.pageNum += 1;
            navItem.loadingType = 'more';
          } else {
            navItem.loadingType = 'nomore';
          }
            
            const endTime = new Date().getTime();
            console.log(`${status === 4 ? '退款' : '订单'}数据加载完成，耗时:`, endTime - startTime, 'ms');
          })
          .catch(err => {
            console.error(`加载${status === 4 ? '退款' : '订单'}数据失败:`, err);
            navItem.loadingType = 'more';
            
            // 显示错误提示
            uni.showToast({
              title: '加载数据失败，请重试',
              icon: 'none',
              duration: 2000
            });
            
            // 确保标签被标记为已加载，避免循环加载
            navItem.loaded = true;
          })
          .finally(() => {
            // 无论成功失败，都结束加载状态
            this.$nextTick(() => {
              this.dataLoading = false;
              this.isInitialLoading = false;
            });
          });
      } catch (err) {
        console.error('加载数据方法执行错误:', err);
        this.dataLoading = false;
        this.isInitialLoading = false;
        
        // 显示错误提示
        uni.showToast({
          title: '页面出错，请重新进入',
          icon: 'none',
          duration: 2000
        });
      }
    },

    //swiper 切换
    changeTab(e) {
      // 获取新旧索引
      const oldIndex = this.tabCurrentIndex;
      const newIndex = e.detail.current;
      
      // 记录状态值变化
      const oldStatus = this.navList[oldIndex].status;
      const newStatus = this.navList[newIndex].status;
      
      // 设置新的当前索引
      this.tabCurrentIndex = newIndex;
      
      console.log(`Swiper切换: ${oldStatus}(${oldIndex}) -> ${newStatus}(${newIndex})`);
      
      // 确定当前标签的加载状态
      const navItem = this.navList[newIndex];
      const isLoaded = navItem.loaded;
      
      // 根据是否已加载数据设置初始加载状态
      this.isInitialLoading = !isLoaded;
      
      // 强制设置当前标签为未加载状态，确保数据刷新
      navItem.loaded = false;
      
      // 切换标签后刷新数据
      this.refreshCurrentTab();
    },
    //顶部tab点击
    tabClick(index) {
      // 记录当前点击的标签对应的状态值，用于接口调用
      const clickedStatus = this.navList[index].status;
      console.log(`点击标签: ${this.navList[index].text}, 状态值: ${clickedStatus}`);
      
      if (this.tabCurrentIndex === index) {
        // 如果点击当前已选中的标签，则刷新该标签数据
        console.log("点击当前已选中标签，刷新数据");
        this.refreshCurrentTab();
      } else {
        // 保存旧索引，用于日志记录
        const oldIndex = this.tabCurrentIndex;
        const oldStatus = this.navList[oldIndex].status;
        
        // 设置新的当前索引
      this.tabCurrentIndex = index;
        
        // 确定当前标签的加载状态
        const navItem = this.navList[index];
        const isLoaded = navItem.loaded;
        
        // 根据是否已加载数据设置初始加载状态
        this.isInitialLoading = !isLoaded;
        
        // 强制设置当前标签为未加载状态，确保刷新数据
        navItem.loaded = false;
        
        // 确保当前标签加载数据
        console.log(`手动切换标签 ${oldStatus} -> ${clickedStatus}, 准备加载数据...`);
        this.refreshCurrentTab();
      }
    },
    //删除订单
    deleteOrder(id) {
      this.$confirmDialog.confirm('确定删除该订单吗？').then(() => {
        this.$modal.loading('请稍后')
        return delRefund(id)
      }).then(() => {
        this.$modal.closeLoading()
        this.$modal.msgSuccess('删除成功')
        this.refreshCurrentTab();
      })
    },
    pay(item) {
      uni.navigateTo({
        url: `/pages/sellment/money/pay?orderId=${item.id}`
      })
    },
    receipt(item) {
      this.$confirmDialog.confirm('确认收货吗？').then(function () {
        return handleReceipt(item.id)
      }).then(response => {
        this.$modal.msgSuccess("收货成功");
        this.refreshCurrentTab();
      })
    },
    // 取消订单
    cancelOrder(item) {
      this.$confirmDialog.confirm('确定取消订单？').then(() => {
        this.$modal.loading('请稍后')
        return cancelOrder(item.id)
      }).then(() => {
        this.$modal.closeLoading()
        this.$modal.msgSuccess('取消成功')
        this.refreshCurrentTab();
      })
    },
    handleCancelRefund({id}) {
      this.$confirmDialog.confirm('确定取消申请？').then(() => {
        this.$modal.loading('请稍后')
        return cancelRefund(id)
      }).then(() => {
        this.$modal.closeLoading()
        this.$modal.msgSuccess('取消成功')
        this.refreshCurrentTab();
      })
    },
    //订单状态文字和颜色
    orderstatusExp(status) {
      let statusTip = '',
          statusTipColor = '#fa436a';
      switch (+status) {
        case 1:
          statusTip = '待付款';
          break;
        case 2:
          statusTip = '待发货';
          break;
        case 9:
          statusTip = '订单已关闭';
          statusTipColor = '#909399';
          break;

          //更多自定义
      }
      return {statusTip, statusTipColor};
    },
    // 处理搜索
    handleSearch() {
      this.navigateToSearch(this.queryParams.keyword);
    },
    navigateToSearch(keyword = '') {
      uni.navigateTo({
        url: `/pages/sellment/order/search-result${keyword ? '?keyword=' + keyword : ''}`
      });
    },
    // 清除搜索
    clearSearch() {
      this.queryParams.keyword = '';
    },
    goBack() {
      uni.navigateBack();
    },
    swiperFinished(e) {
      // 在swiper动画完成后检查是否需要刷新数据
      const currentIndex = this.tabCurrentIndex;
      const navItem = this.navList[currentIndex];
      
      console.log(`Swiper动画完成，当前标签: ${navItem.text}`);
      
      // 如果当前标签未加载数据或数据为空，强制刷新
      if (!navItem.loaded || navItem.orderList.length === 0) {
        console.log(`标签 "${navItem.text}" 未加载数据，准备刷新`);
        this.refreshCurrentTab();
      }
    },
    // 滚动到底部加载更多
    loadMore() {
      console.log('滚动到底部，加载更多数据');
      // 加载更多数据时不显示全屏loading
      this.loadData('loadMore');
    },
  },
  // 在组件销毁前清除所有定时器
  beforeDestroy() {
    try {
      this.navList.forEach(navItem => {
        if (navItem.orderList && navItem.orderList.length) {
          navItem.orderList.forEach(order => {
            if (order.timer) {
              clearInterval(order.timer);
              order.timer = null;
            }
          });
        }
      });
    } catch (err) {
      console.error('清除定时器错误:', err);
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #e84d1c;
}

.status-bar {
  width: 100%;
}

.header {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  
  .back-btn {
    position: absolute;
    left: 12px;
  height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
}

  .search-box {
    flex: 1;
    height: 32px;
    margin: 0 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    
    .uni-icons {
      margin-right: 4px;
    }
    
    input {
      flex: 1;
  height: 100%;
      font-size: 13px;
      color: #333;
    }
  }
}

.tab-nav {
  display: flex;
  height: 44px;
  background: #fff;

  .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
    position: relative;

    &.active {
      color: #e84d1c;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 3px;
        transform: translateX(-50%);
        width: 16px;
        height: 2px;
        background: #e84d1c;
        border-radius: 1px;
      }
    }
  }
}

.swiper-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /* #ifdef H5 */
  height: calc(100vh - 88px);
  /* #endif */
  /* #ifdef APP-PLUS */
  height: calc(100vh - var(--status-bar-height) - 88px);
  /* #endif */
}

.swiper-item {
  height: 100%;
  overflow: hidden;
}

.scroll-view {
  height: 100%;
  box-sizing: border-box;
  padding: 20rpx;
}

.placeholder {
  color: #999;
  font-size: 13px;
}

.order-item {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  
  &:last-child {
    margin-bottom: 0;
  }

  .i-top {
    display: flex;
    align-items: center;
    height: 80rpx;
    font-size: 26rpx;
    color: #333;
    position: relative;
    border-bottom: 1rpx solid #f5f5f5;
    margin-bottom: 10rpx;

    .time {
      flex: 1;
      color: #666;
    }

    .status {
      font-size: 26rpx;
      font-weight: 500;
      padding: 4rpx 12rpx;
      border-radius: 4rpx;
      
      // 待下单状态
      &.status-pending {
        color: #ff9900;
        background: rgba(255, 153, 0, 0.1);
      }
      
      // 待发货状态
      &.status-shipping {
        color: #e84d1c;
        background: rgba(232, 77, 28, 0.1);
      }
      
      // 待收货状态
      &.status-receiving {
        color: #2b85e4;
        background: rgba(43, 133, 228, 0.1);
      }
      
      // 待评价状态
      &.status-reviewing {
        color: #19be6b;
        background: rgba(25, 190, 107, 0.1);
  }

      // 已完成状态
      &.status-completed {
        color: #52c41a;
        background: rgba(82, 196, 26, 0.1);
      }
      
      // 已关闭状态
      &.status-closed {
        color: #999;
        background: rgba(153, 153, 153, 0.1);
      }
    }
  }

  // 退款状态标签样式优化
  .refund-tag {
      display: inline-block;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    font-size: 24rpx;
    line-height: 1.4;
    
    // 申请中
    &.refund-pending {
      color: #ff9900;
      background: rgba(255, 153, 0, 0.1);
      border: 1rpx solid rgba(255, 153, 0, 0.2);
    }
    
    // 申请成功
    &.refund-approved {
      color: #e84d1c;
      background: rgba(232, 77, 28, 0.1);
      border: 1rpx solid rgba(232, 77, 28, 0.2);
    }
    
    // 申请失败
    &.refund-rejected {
      color: #666;
      background: rgba(102, 102, 102, 0.1);
      border: 1rpx solid rgba(102, 102, 102, 0.2);
  }

    // 售后完成
    &.refund-completed {
      color: #52c41a;
      background: rgba(82, 196, 26, 0.1);
      border: 1rpx solid rgba(82, 196, 26, 0.2);
    }
  }

  .goods-box-single {
    display: flex;
    padding: 20rpx 0;
    position: relative;
    
    &:active {
      background: #fafafa;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 0 0 20rpx;
      overflow: hidden;

      .title {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 10rpx;
      }

      .attr-box {
        font-size: 24rpx;
        color: #999;
        line-height: 1.4;
      }

      .price {
        font-size: 30rpx;
        color: #333;
        font-weight: 600;

        &:before {
          content: '¥';
          font-size: 24rpx;
          margin: 0 2rpx 0 0;
          font-weight: normal;
        }
      }
    }
  }

  .price-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20rpx 0;
    font-size: 26rpx;
    color: #666;
    border-top: 1rpx solid #f5f5f5;
    margin-top: 10rpx;

    .num {
      margin: 0 8rpx;
      color: #333;
      font-weight: 500;
    }

    .price {
      font-size: 32rpx;
      color: #e84d1c;
      font-weight: 600;
      margin-left: 4rpx;

      &:before {
        content: '¥';
        font-size: 24rpx;
        margin-right: 2rpx;
        font-weight: normal;
      }
    }
  }

  .action-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    position: relative;
    border-top: 1rpx solid #f5f5f5;
    margin-top: 10rpx;

    .left-btns {
      display: flex;
      align-items: center;
    }

    .right-btns {
      display: flex;
      align-items: center;
  }

  .action-btn {
      min-width: 160rpx;
      height: 64rpx;
      margin-left: 20rpx;
      font-size: 26rpx;
      color: #666;
      background: #f8f8f8;
      border-radius: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      border: none;
      padding: 0 30rpx;

      &:first-child {
        margin-left: 0;
      }

    &:after {
        border: none;
      }

      &:active {
        transform: scale(0.98);
    }

    &.recom {
        background: linear-gradient(90deg, #e84d1c, #f06e44);
        color: #fff;
        font-weight: 500;
        box-shadow: 0 4rpx 16rpx rgba(232, 77, 28, 0.3);
        
        &:active {
          transform: scale(0.98);
          box-shadow: 0 2rpx 8rpx rgba(232, 77, 28, 0.2);
        }
      }
    }
  }
}

.up-warning {
  color: #ff9900;
  background: rgba(255, 153, 0, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

.up-error {
  color: #e84d1c;
  background: rgba(232, 77, 28, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

.up-primary {
  color: #666;
  background: rgba(102, 102, 102, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

.up-info {
  color: #333;
  background: rgba(51, 51, 51, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

/* load-more */
.uni-load-more {
  display: flex;
  flex-direction: row;
  height: 80upx;
  align-items: center;
  justify-content: center
}

.uni-load-more__text {
  font-size: 28upx;
  color: #999
}

.uni-load-more__img {
  height: 24px;
  width: 24px;
  margin-right: 10px
}

.uni-load-more__img > view {
  position: absolute
}

.uni-load-more__img > view view {
  width: 6px;
  height: 2px;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  background: #999;
  position: absolute;
  opacity: .2;
  transform-origin: 50%;
  animation: load 1.56s ease infinite
}

.uni-load-more__img > view view:nth-child(1) {
  transform: rotate(90deg);
  top: 2px;
  left: 9px
}

.uni-load-more__img > view view:nth-child(2) {
  transform: rotate(180deg);
  top: 11px;
  right: 0
}

.uni-load-more__img > view view:nth-child(3) {
  transform: rotate(270deg);
  bottom: 2px;
  left: 9px
}

.uni-load-more__img > view view:nth-child(4) {
  top: 11px;
  left: 0
}

.load1,
.load2,
.load3 {
  height: 24px;
  width: 24px
}

.load2 {
  transform: rotate(30deg)
}

.load3 {
  transform: rotate(60deg)
}

.load1 view:nth-child(1) {
  animation-delay: 0s
}

.load2 view:nth-child(1) {
  animation-delay: .13s
}

.load3 view:nth-child(1) {
  animation-delay: .26s
}

.load1 view:nth-child(2) {
  animation-delay: .39s
}

.load2 view:nth-child(2) {
  animation-delay: .52s
}

.load3 view:nth-child(2) {
  animation-delay: .65s
}

.load1 view:nth-child(3) {
  animation-delay: .78s
}

.load2 view:nth-child(3) {
  animation-delay: .91s
}

.load3 view:nth-child(3) {
  animation-delay: 1.04s
}

.load1 view:nth-child(4) {
  animation-delay: 1.17s
}

.load2 view:nth-child(4) {
  animation-delay: 1.3s
}

.load3 view:nth-child(4) {
  animation-delay: 1.43s
}

@-webkit-keyframes load {
  0% {
    opacity: 1
  }

  100% {
    opacity: .2
  }
}

/* 空状态样式优化 */
.empty-content {
  padding-top: 120rpx;
}

/* 加载动画样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 240rpx);
  animation: fadeIn 0.5s ease-out;
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    margin-bottom: 20rpx;
    
    .loading-bounce {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(232, 77, 28, 0.6);
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      animation: bounce 2s infinite ease-in-out;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgba(232, 77, 28, 0.6);
        opacity: 0.6;
        animation: bounce 2s infinite ease-in-out;
        animation-delay: -1.0s;
      }
    }
  }
  
  .loading-text {
    color: #999;
    font-size: 28rpx;
  }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0);
  }
  50% { 
    transform: scale(1.0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20rpx);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
